<template>
  <div class="yibiaopan_wrap">
    <div class="left_wrap">
      <div class="left_btm_wrap">
        <!-- <div class="charts2_wrap">
          <div class="common_title">非结构化元数据字典</div>
          <div class="charts2_main">
            <pie-charts></pie-charts>
          </div>
        </div> -->
        <div class="charts3_wrap">
          <div class="common_title">元数据标准</div>
          <div class="charts3_main">
            <!-- <div class="main_left">
              <div class="num"><span>3243</span>条</div>
              <div class="text">总数据量</div>
            </div> -->
            <div class="main_list" @click="nav('yaosu')">
              <div class="main_title">要素</div>
              <div class="main_left">
                <div class="num">
                  <span>{{ headobj.elementCount }}</span
                  >条
                </div>
                <div class="text">总数据量</div>
              </div>
            </div>
            <div class="main_list" @click="nav('zidian')">
              <div class="main_title">字典</div>
              <div class="main_left">
                <div class="num">
                  <span>{{ headobj.dictCount }}</span
                  >条
                </div>
                <div class="text">总数据量</div>
              </div>
            </div>
            <div class="main_list" @click="nav('moxing')">
              <div class="main_title">模型</div>
              <div class="main_left">
                <div class="num">
                  <span>{{ headobj.modelCount }}</span
                  >条
                </div>
                <div class="text">总数据量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="charts1_content">
        <div class="common_title">数据库数据</div>
        <div class="charts1_list">
          <div class="charts1_item">
            <bar-charts
              v-if="chartsData1.length > 0"
              :chartData="chartsData1"
            ></bar-charts>
          </div>
          <div class="charts2_item">
            <bar-charts
              v-if="chartsData2.length > 0"
              :chartData="chartsData2"
            ></bar-charts>
          </div>
        </div>
        <div class="charts1_info">
          <div
            class="charts_info_item charts1_info_item"
            @click="navTo('业务数据库')"
          >
            <div class="name">业务数据库</div>
            <div class="number">{{ bttomObj.dataCount1 }}</div>
          </div>
          <div
            class="charts_info_item charts2_info_item"
            @click="navTo('业务知识库')"
          >
            <div class="name">业务知识库</div>
            <div class="number">{{ bttomObj.dataCount2 }}</div>
          </div>
          <div class="charts1_info_line"></div>
        </div>
      </div>
    </div>
    <div class="right_wrap">
      <div class="right_chart1">
        <div class="common_box">
          <div class="common_title">数据变化折线图</div>
          <el-select
            filterable
            v-model="statisticalType"
            placeholder="请选择"
            @change="changeDate"
            class="bin_select common_select"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="charts1_main">
          <smooth-line
            v-if="smoothData.length > 0"
            :chartData="smoothData"
          ></smooth-line>
        </div>
      </div>
      <div class="right_his">
        <div class="common_title">历史记录</div>
        <vue-seamless-scroll
          :data="listData"
          :class-option="classOption"
          class="his_warp"
        >
          <ul class="his_list">
            <li class="listItem" v-for="(item, index) in listData" :key="index">
              <span class="title" v-text="item"></span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
      <div class="right_charts2">
        <div class="common_title">表单引用排名</div>
        <div class="charts2_main">
          <div class="chart_box">
            <div v-for="(item, index) in rankData" :key="index">
              <img
                v-if="index < 3"
                :src="require(`../../../assets/medal${index + 1}.png`)"
                alt=""
              />
              <span v-else>{{ index }}.</span>
              <span class="text" :title="item.data_table_name">{{
                item.data_table_name
              }}</span>
              <span>{{ item.num }}次</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import barCharts from "./components/barCharts.vue";
import smoothLine from "./components/smoothLine.vue";
import bgLine from "./components/bgLine.vue";
import pieCharts from "./components/pieCharts.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "yibiaopanPage",
  components: { barCharts, smoothLine, bgLine, pieCharts, vueSeamlessScroll },
  data() {
    return {
      headobj: {},
      smoothData: [],
      chartData2: [],
      bttomObj: {
        dataCount1: 0,
        dataCount2: 0,
      },
      listData: [],
      classOption: {
        singleHeight: 50,
      },
      rankData: [],
      chartsData1: [],
      chartsData2: [],
      statisticalType: "day",
      options: [
        {
          value: "year",
          label: "年",
        },
        {
          value: "month",
          label: "月",
        },
        {
          value: "day",
          label: "日",
        },
      ],
    };
  },
  mounted() {
    this.getChart();
    this.getStatistics();
    this.getHistory();
    this.getRanking();
  },
  methods: {
    nav(biaozhun) {
      this.$router.push({
        path: "/targetWater/yuanshujuzidian",
        query: {
          show: biaozhun,
        },
      });
    },
    navTo(type) {
      this.$router.push({
        path: "/targetWater/shujuku",
        query: {
          type: type,
        },
      });
    },
    getChart() {
      this.$api.queryMetadataStandardStatistics().then((res) => {
        if (res.code == 200) {
          this.headobj = res.result;
        }
      });
      this.$api.queryDataBaseDataStatistics().then((res) => {
        if (res.code == 200) {
          this.chartsData1 = res.result["业务数据库"].dataCountList.map((s) => {
            return {
              name: s.dataType,
              value: s.dataCount,
              weekvalue: s.recentlyAddedRows,
            };
          });
          this.chartsData2 = res.result["业务知识库"].dataCountList.map((s) => {
            return {
              name: s.dataType,
              value: s.dataCount,
              weekvalue: s.recentlyAddedRows,
            };
          });
          // console.log(this.chartsData1, this.chartsData2)
          this.bttomObj = {
            dataCount1: res.result["业务数据库"].dataCount,
            dataCount2: res.result["业务知识库"].dataCount,
          };
        }
      });
    },
    changeDate(value) {
      this.getStatistics();
    },
    // 查折线图数据
    getStatistics() {
      this.$api
        .queryDataNumStatisticsByDate({ statisticalType: this.statisticalType })
        .then((res) => {
          // console.log(res, 'resStatistics')
          let arr1Data = res.result.map((item) => item["水声信号数据"]);
          let arr2Data = res.result.map((item) => item["处理结果数据"]);
          let arr3Data = res.result.map((item) => item["信号特征数据"]);
          let arr4Data = res.result.map((item) => item["环境要素数据"]);
          let arr5Data = res.result.map((item) => item["态势数据"]);
          let xData = res.result.map((item) => item.date);
          this.$set(this.smoothData, 0, {
            arr1Data: arr1Data,
            arr2Data: arr2Data,
            arr3Data: arr3Data,
            arr4Data: arr4Data,
            arr5Data: arr5Data,
            xData: xData,
          });
        });
    },
    // 查历史纪录
    getHistory() {
      this.$api.queryWarehousingRecord().then((res) => {
        // console.log(res, 'resHistory')
        this.listData = res.result;
      });
    },
    // 查排名
    getRanking() {
      this.$api
        .queryReferenceTablesRanking({ statisticalType: "" })
        .then((res) => {
          this.rankData = res.result;
          // console.log(res, 'resRanking')
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.yibiaopan_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .common_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(2, 255, 244, 0.15);

    .common_select {
      width: 30% !important;
      margin-right: 10px;
    }
  }

  .common_title {
    width: 40%;
    flex: 0 0 auto;
    height: 50px;

    box-sizing: border-box;
    padding: 0 32px;
    position: relative;
    font-size: 20px;
    color: #fff;
    line-height: 50px;

    &::after {
      content: "";
      width: 5px;
      height: 20px;
      background: #02fff4;
      position: absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .left_wrap {
    flex: 1 1 auto;
    width: 0;
    height: 100%;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .charts1_content {
      width: 100%;
      height: 44%;
      box-sizing: border-box;
      border: 1px solid #02fff4;
      background: rgba(2, 82, 107, 0.6);
      display: flex;
      flex-direction: column;

      .charts1_list {
        flex: 1 1 auto;
        width: 100%;
        height: 0;
        display: flex;

        .charts1_item {
          width: 60%;
          height: 100%;
        }

        .charts2_item {
          width: 40%;
          height: 100%;
        }
      }

      .charts1_info {
        flex: 0 0 auto;
        height: 60px;
        margin: 0 20px 20px;
        display: flex;
        align-items: center;
        background: rgba(2, 255, 244, 0.15);
        border: 1px solid #00fff4;
        box-sizing: border-box;
        position: relative;

        .charts_info_item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 60%;
          color: #fff;
          cursor: pointer;

          .name {
            width: 140px;
            height: 38px;
            background: #005e7b;
            border-radius: 1px;
            border: 1px solid #02fff4;
            box-shadow: inset 0px 0px 15px 1px #02fff4;
            font-size: 18px;
            text-align: center;
            line-height: 38px;
          }

          .number {
            font-size: 40px;
            margin-left: 15%;
          }
        }

        .charts1_info_item {
          width: 60%;
        }

        .charts2_info_item {
          width: 40%;
        }

        .charts1_info_line {
          width: 1px;
          height: 40px;
          background-color: #00fff4;
          position: absolute;
          top: 50%;
          left: 60%;
          transform: translate(-50%, -50%);
        }
      }
    }

    .left_btm_wrap {
      width: 100%;
      height: 54%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .charts2_wrap {
        width: calc(50% - 10px);
        height: 100%;
        border: 1px solid #02fff4;

        .charts2_main {
          height: calc(100% - 50px);
        }
      }

      .charts3_wrap {
        // width: calc(50% - 10px);
        width: calc(100%);
        height: 100%;
        border: 1px solid #02fff4;

        .charts3_main {
          height: calc(100% - 50px);
          padding-right: 10px;
          display: flex;
          justify-content: space-around;
          align-items: center;

          .main_left {
            // min-width: 50%;
            // width: 60%;
            // aspect-ratio: 1 / 1;
            // background-image: url("../../../assets/yibiaopan_chart_bg.png");
            // background-position: center;
            // background-size: 115% 115%;
            // background-repeat: no-repeat;
            // display: flex;
            // flex-direction: column;
            // align-items: center;
            // justify-content: center;
            // color: #fff;
            // font-family: Source Han Sans CN, Source Han Sans CN;
            // font-weight: 400;
            // line-height: 32px;
            .num {
              font-size: 24px;

              span {
                font-size: 60px;
              }
            }

            .text {
              font-size: 30px;
              line-height: 40px;
            }
          }

          .main_list {
            max-width: 50%;
            min-width: 20%;
            cursor: pointer;

            .main_title {
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #ffffff;
              width: auto;
              height: 40px;
              line-height: 40px;
              text-align: center;
            }

            .main_left {
              // min-width: 50%;
              width: 100%;
              aspect-ratio: 1 / 1;
              background-image: url("../../../assets/yibiaopan_chart_bg.png");
              background-position: center;
              background-size: 115% 115%;
              background-repeat: no-repeat;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              color: #fff;
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              line-height: 32px;

              .num {
                font-size: 22px;

                span {
                  font-size: 54px;
                }
              }

              .text {
                font-size: 30px;
                line-height: 40px;
              }
            }

            .list_item {
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              font-size: 16px;
              color: #ffffff;
              line-height: 40px;
              text-align: left;
              width: auto;
              height: 40px;
              background: #022b4f;
              border-radius: 0px 0px 0px 0px;
              border: 1px solid #02fff4;
              box-sizing: border-box;
              padding: 0 20px;
              margin-bottom: 10px;

              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }
      }
    }
  }

  .right_wrap {
    flex: 1 1 1;
    width: 600px;
    height: 100%;

    .right_chart1 {
      border: 1px solid #02fff4;

      .charts1_main {
        width: 100%;
        height: 200px;
        background: rgba(2, 82, 107, 0.6);
      }
    }

    .right_his {
      border: 1px solid #02fff4;
      margin-top: 20px;
      box-sizing: border-box;
      background: rgba(2, 82, 107, 0.6);
      width: 100%;

      .his_warp {
        height: 200px;
        margin: 0 auto;
        overflow: hidden;
        padding: 5px 20px;
        box-sizing: border-box;

        ul {
          list-style: none;
          padding: 0;
          margin: 0 auto;

          li {
            display: block;
            display: flex;
            justify-content: space-between;
            font-size: 15px;
            background: rgba(2, 43, 79, 0.6);
            border-radius: 0px 0px 0px 0px;
            width: 352px;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            line-height: 0px;
            text-align: left;
            margin-top: 10px;
            height: 40px;
            line-height: 40px;
            width: 100%;
            position: relative;
            padding-left: 30px;
            box-sizing: border-box;

            &::before {
              content: "";
              position: absolute;
              left: 10px;
              top: calc(50% - 5px);
              width: 10px;
              height: 10px;
              border-radius: 5px;
              background: #ffffff;
            }
          }
        }
      }
    }

    .right_charts2 {
      border: 1px solid #02fff4;
      margin-top: 20px;
      // overflow-y: scroll;
      // overflow: hidden;
      height: calc(100% - 546px);

      .charts2_main {
        height: calc(100% - 50px);
        /* 允许项目换行 */

        overflow-y: scroll;

        .chart_box {
          height: 200px;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;

          div {
            height: 40px;
            width: 47%;
            color: #fff;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 30px;
              height: 30px;
              // line-height: 40px;
            }

            span {
              margin-left: 5px;
            }

            .text {
              width: 80px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              cursor: pointer;
            }
          }
        }

        // }
      }
    }
  }
}
</style>
